<template>
	<view>
		<view style="width:100%; height:400rpx">
			<l-echart ref="chartRef" @finished="init"></l-echart>

		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		props: ['dataList'],
		data() {
			return {
				option: {
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					color: ['#FFD5B3', '#8AABFF'],
					grid: {
						top: 40,
						left: '2%',
						right: '2%',
						bottom: '3%',
						containLabel: true
					},
					legend: {
						show: true,
						left: 'left',
						padding: [0, 10, 10, 10]
					},
					 dataZoom: [{ // 添加滚动条配置
					        type: 'inside', // 这个 dataZoom 组件是滑动条
					        start: 0,       // 左边在 0% 的位置
					        end: 60,       // 右边在 100% 的位置
							zoomLock:true
					    }],
					xAxis: [{
						type: 'category',
						data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return item.month}) : [],
						// data: ['九月', '十月', '十一月'],
						axisTick: {
							alignWithLabel: true,
							show:false,
						},
						axisLabel: {
							fontSize:12,
							color: "#777",
							interval:'auto'
						},
						splitNumber:5
					}],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							color: "#777",
							show: false
						},
					}],
					series: [{
							name: '客户数',
							type: 'bar',
							label: {
								show: true,
								color: '#BA6C2D',
								position: 'top'
							},
							data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return item.custom_num}) : [],
							barWidth:'20%',
							barGap:0
						},
						{
							name: '拜访数据',
							type: 'bar',
							data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return item.visits_num}) : [],
							label: {
								show: true,
								color: '#0842D8',
								position: 'top'
							},
							barWidth:'20%'
						}
						//     {
						//       name: '客户数',
						//       type: 'line',
						//       stack: 'vistors',
						//       barWidth: '60%',
						//       // data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return item.num}) : [],
						//       data: [50,100,105],
						//  }, {
						//       name: '拜访数据',
						//       type: 'line',
						//       stack: 'vistors',
						//       barWidth: '60%',
						//       // data: this.dataList&&this.dataList.length > 0 ? this.dataList.map((item)=> {return item.num}) : [],
						//         data: [30,65,10],                              
						// },
					]
				},
			};
		},
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		methods: {
			async init() {

				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option)
			}
		}
	}
</script>

<style>
</style>